<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .layout{
            margin-top: 20px;
        }
        .layout article div{
            min-height: 100px;
        }
    </style>
</head>
<body style="overflow:hidden;">
<section class="layout float">
    <style>
        .layout.float{
            min-height: 100px;
        }
        .layout.float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .center{
            overflow: hidden;
            background: yellow;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background: blue;
        }
    </style>
    <article>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">解决方案float
            <p>增加高度</p>
            <p>增加高度</p>
            <p>增加高度</p>
            <p>增加高度</p>
            <p>增加高度</p>
            <p>增加高度</p>
            <p>增加高度</p>
        </div>
    </article>
</section>

    <section class="layout absolute">
        <style>
            .layout.absolute{
                width: 100%;
                min-height: 100px;
            }
            .layout.absolute .left{
                position: absolute;
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.absolute .center{
                position: absolute;
                left: 300px;
                right: 300px;
                background: yellow;
            }
            .layout.absolute .right{
                position: absolute;
                right: 0;
                width: 300px;
                background: blue;
            }
        </style>
        <article>
            <div class="left"></div>
            <div class="center">解决方案absolute
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>

        </article>
    </section>

    <section class=" layout flexbox">
        <style>
            .layout.flexbox article{
                display: flex;
            }
            .layout.flexbox .left{
                width: 300px;
                background: red;
            }
            .layout.flexbox .center{
                flex: 1;
                background: yellow;
            }
            .layout.flexbox .right{
                width: 300px;
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">解决方案flex
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

    <section class=" layout tablecell">
        <style>
            .layout.tablecell article{
                width: 100%;
                display: table;
                height: 100px;
            }
            .layout.tablecell .left{
                width: 300px;
                background: red;
                display: table-cell;
            }
            .layout.tablecell .center{
                background: yellow;
                display: table-cell;
            }
            .layout.tablecell .right{
                width: 300px;
                background: blue;
                display: table-cell;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">解决方案tablecell
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

    <section class=" layout grid">
        <style>
            .layout.grid article{
                display: grid;
                width: 100%;
                grad-template-rows:100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background: red;
            }
            .layout.grid .center{
                background: yellow;
            }
            .layout.grid .right{
                background: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">解决方案grid
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
                <p>增加高度</p>
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>